<template>
  <div class="resume_header">
    <span>停招岗位</span>
  </div>
  <div class="resume_center">
    <el-table :data="filterTableData.slice((page - 1) * limit,page*limit)
    " style="width: 100%" height="400px" size="large">
      <el-table-column class="table_colum" label="岗位名称" size="large">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="300px">
            <template #default>
              <div>岗位名称: {{ scope.row.jobName }}</div>
              <div>工作地址: {{ scope.row.jobAddress }}</div>
              <div>学历要求: {{ scope.row.jobEdu }}</div>
              <div>工作经验: {{ scope.row.jobEx }}</div>
              <div>工作薪资: {{ scope.row.jobSalary }}</div>
            </template>
            <template #reference>
              <el-tag class="jobName_tag" style="line-height: 80%;font-size: 20px;">{{ scope.row.jobName }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="HR姓名">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="200px">
            <template #default>
              <div>HR姓名: {{ scope.row.hrName}}</div>
              <div>联系电话: {{ scope.row.hrPhone }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.hrName }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="状态" >
        <template #default="scope">
          <el-tag type="danger" size="default" >{{scope.row.jobState}}</el-tag>
        </template>
          
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="default" placeholder="岗位搜索" />
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :page="page" :limit="limit" :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange" :filterTableData="filterTableData" :pagesizes="pagesizes" />
    </div>

  </div>
</template>
<script lang='ts' setup>

import { template } from 'lodash';
import { computed, ref, onMounted, reactive, watch, onBeforeMount } from 'vue'
import { useStore } from "vuex"
import Pagination from "@/components/Pagination.vue"
import { getAllPublishedJob} from "@/api/enterpriseApi"
import { elmessage, data } from "@/hook/hook"
import { useRouter } from "vue-router"
const store = useStore()
const router = useRouter()

// 表格数据定义

interface Job {
  jobId: string
  hrName: string
  hrPhone: string
  jobName: string
  jobAddress: string,
  jobEdu: string,
  jobEx: string,
  jobSalary: string,
  jobDetail:string,
  jobIndustry:string,
  jobState: string,
  isCurrentHR: string,

}
const tableData: Job[] = reactive([])

const search = ref('')
const filterTableData = computed(() =>

  tableData.filter(
    (data, index) =>
      !search.value ||
      // 通过岗位名称筛选
      // data.name.toLowerCase().includes(search.value.toLowerCase())
      data.jobName.toLowerCase().indexOf(search.value.toLowerCase()) !== -1
  )

)


// 分页器
const page = ref(1)
const pagesizes = ref([1, 2, 3, 4, 10, 20, 30, 40])
const limit = ref(10)

const handleSizeChange = (val: number) => {
  limit.value = val
  page.value = 1
}
const handleCurrentChange = (val: number) => {
  page.value = val
}


const init =  () => {
   getAllPublishedJob(data()).then((res: any) => {
    if (res.data["code"] == "200") {
      res.data.datas.forEach((value: any, index: any, self: any) => {
        tableData.push(value)
      })
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data);

    }

  })
}



onBeforeMount(() => {
  init()
})


</script>
<style scoped>

.pagination {
  float: right;
  margin-right: 50px;

}

.jobName_tag {
  background-color: #FFF;
  color: #000;
  border-width: 0;
}

.table_colum:hover .jobName_tag {
  background-color: #F5F7FA
}


.resume_center {
  font-family: '微软雅黑';
  height: 800px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  justify-content: space-between;
}

a {
  text-decoration: none;
  color: #000;
}
</style>